<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: #c4dcec;
			height: 100vh;
			overflow: hidden;
        }             
		#ren{
			width: 130px;
			position: absolute;
			bottom: 0%;
			left: 50%;
		}
		#ren.left{
			transform: rotateY(180deg);
		}
		.ddd{
			width: 0;
			position: absolute;
			bottom: 7.4%;
			left: 55%;
			animation:you 2s linear ;
		}
		.ddd.left{
			position: absolute;
			bottom: 7.4%;
			left: 52%;
			animation:left 2s linear ;
		}
		@keyframes you{
			from{width: 15px;transform: translateX(0%);}
			to{width: 15px;transform: translateX(6000%);opacity: 0;filter: hue-rotate(100deg);}
		}
		@keyframes left{
			from{width: 15px;transform: translateX(0%);}
			to{width: 15px;transform: translateX(-6000%);opacity: 0;}
		}
	</style>
	<body>
		<canvas id="ren" width="200" height="200" >
			你浏览器不支持
		</canvas>
		<img class="ddd" src="dddd.png" >
		<script type="text/javascript">
			let cc = document.querySelector("#ren").getContext('2d');
			cc.arc(100,35,30,0,2*Math.PI);
			cc.moveTo(100,65);
			cc.lineTo(100,130);
			cc.lineTo(50,180);
			
			cc.moveTo(100,130);
			cc.lineTo(135,160);
			cc.lineTo(125,180);
			
			cc.moveTo(180,35);
			cc.lineTo(155,70);
			cc.lineTo(100,90);
			
			cc.moveTo(180,150);
			cc.lineTo(155,120);
			cc.lineTo(100,110);
			cc.lineWidth = 5;
			cc.stroke();
			
			window.onkeydown = function dong(e){
				console.log(e.keyCode);
				if(e.keyCode==32){
					let ddd = document.querySelector(".ddd").cloneNode(false);
					document.querySelector("body").appendChild(ddd);
				}
				if(e.keyCode==37||e.keyCode==65){
					 document.querySelector("#ren").classList.add('left');
					 document.querySelector(".ddd").classList.add('left');
				}
				if(e.keyCode==39||e.keyCode==68){
					 document.querySelector("#ren").classList.remove('left');
					 document.querySelector(".ddd").classList.remove('left');
				}
				
			}
			
		</script>
	</body>
</html>
